import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { wait } from '@/utils/util'
import { PolicyStatusCnEnum } from '@/const/enum'
import { getOperateRecordDetailList } from '@/api/insurance/period'
import type { OperateRecordDetailDto, OperateRecordDto } from '@/api/insurance/period/types'
import Dialog from '@/components/dialog/Index'
import { Col, Row } from 'ant-design-vue'

interface RenderItemDto {
    name: string
    value: string | number | null
    suffix?: string
}

@Component
export class DialogOperateDetail extends TableRender {
    @Prop() recordData!: OperateRecordDto

    @Prop() show!: boolean

    showDialog = false
    noTablePadding = true

    renderData = {
        serveCompanyName: {
            name: '派遣单位',
            value: ''
        },
        companyPlanName: {
            name: '方案名称',
            value: ''
        },
        code: {
            name: '方案编码',
            value: ''
        },
        occupationLevel: {
            name: '风险类型',
            value: ''
        },
        createTime: {
            name: '投保日期',
            value: ''
        },
        insurStartTime: {
            name: '生效日期',
            value: ''
        },
        occupationName: {
            name: '工种',
            value: ''
        }
    } as Record<string, RenderItemDto>

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.getData()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    tableColumnConfigOld = () => [
        {
            field: 'userName',
            title: '投保人名称'
        },
        {
            field: 'idCardNo',
            title: '身份证号'
        },
        {
            field: 'policyStatus',
            title: '保单状态',
            formatter: ({row}) => {
                return PolicyStatusCnEnum[row.policyStatus]
            }
        }
    ] as TableRenderColumnTypes<OperateRecordDetailDto>

    async getData() {
        await this.onPage({
            type: 'current',
            currentPage: 1
        })
        await wait(300)
        if (this.tableData?.length) {
            for (const key in this.renderData) {
                this.renderData[key as keyof typeof this.renderData].value =
                    this.tableData[0][key] +
                    (this.renderData[key as keyof typeof this.renderData]?.suffix || '')
            }
        }
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.recordData?.id) return []
        return getOperateRecordDetailList({
            operateRecordId: this.recordData?.id,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <Dialog v-model={this.showDialog} width="80%" title="方案活动列表" showClose>
                <Row gutter={20}>
                    {Object.values(this.renderData).map((i) => {
                        return (
                            <Col md={8} sm={24}>
                                <div class="flex text-lg mb-20px">
                                    <div class="text-black-300">{i.name}：</div>
                                    <div>
                                        {i.value}
                                        {i.suffix}
                                    </div>
                                </div>
                            </Col>
                        )
                    })}
                </Row>
                {super.renderTable()}
            </Dialog>
        )
    }
}

export default toNative<{ recordData: OperateRecordDto }, {}>(DialogOperateDetail)
